<!DOCTYPE html>
<html lang="zh-cn" class="iosx2">

<head>
    <meta charset="UTF-8">
    <title>关注</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/followPage.css">
    <script src="/js/followPage.js"></script>
    <script src="/js/common.js"></script>
    <!--jsRender-->
    <script src="/js/plugins/jsRender/jsrender.min.js"></script>


    <!--页面初始化-->
    <script>
        $(function () {
            //1:拿到userId
            var userId = getParams().userId;

            //2:请求ajax
            $.ajax({
                url: "/userFollows/" + userId,
                type: "Get",
                success: function (result) {
                    console.log(result);
                    //页面数据添加
                    var data = result.data;
                    //渲染页面
                    var followersHtml = $("#followsTmpl").render(data);
                    var fansHtml = $("#fansTmpl").render(data);
                    $(".follower").html(followersHtml);
                    $(".fans").html(fansHtml);
                }
            })
        })
    </script>
</head>


<body>
<!--粉丝列表模板-->
<script type="text/x-jsrender" id="fansTmpl">
    {{for fansList}}
        <a href="javascript:;" class="aui-flex b-line">
            <div class="aui-product-img">
                <img src="{{:headImgUrl}}" alt="头像">
            </div>
            <div class="aui-flex-box">
                <h2>{{:nickName}}</h2>
                <p>{{:sign}}</p>
                <span>
                    <em>{{:place}}</em>
                </span>
            </div>
        </a>
    {{/for}}
</script>
<!--关注列表模板-->
<script type="text/x-jsrender" id="followsTmpl">
    {{for followersList}}
        <a href="javascript:;" class="aui-flex b-line">
            <div class="aui-product-img">
                <img src="{{:headImgUrl}}" alt="头像">
            </div>
            <div class="aui-flex-box">
                <h2>{{:nickName}}</h2>
                <p>{{:sign}}</p>
                <span>
                    <em>{{:place}}</em>
                </span>
            </div>
        </a>
    {{/for}}
</script>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="javascript:history.go(-1);" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">关注粉丝列表</span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-more"></i>
        </a>
    </header>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab="">
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active">
                    <a href="javascript:;">
                        <span>关注</span>
                    </a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">
                        <span>粉丝</span>
                    </a>
                </li>
            </ul>
            <div class="divHeight"></div>

            <div class="tab-panel">
                <!--关注列表-->
                <div class="tab-panel-item tab-active">
                    <div class="aui-title">
                        <h1>黄金组合推荐</h1>
                    </div>
                    <div class="aui-product follower">
                        <a href="javascript:;" class="aui-flex b-line">
                            <div class="aui-product-img">
                                <img src="/upload/f7b178c5-dc83-4743-b120-90bfb24bbb9a.jpeg" alt="">
                            </div>
                            <div class="aui-flex-box">
                                <h2>百年康惠医疗保险</h2>
                                <p>200万保额，性价比超高的保障</p>
                                <span>
                                            <em>70岁也能保</em>
                                            <em>三高患者可投</em>
                                        </span>
                                <h3>230.00<em>元起</em></h3>
                            </div>
                            <div class="aui-arrow-text">安心保险</div>
                        </a>
                    </div>
                    <div class="divHeight"></div>
                </div>


                <!--粉丝列表-->
                <div class="tab-panel-item ">
                    <div class="aui-title">
                        <h1>黄金组合推荐</h1>
                    </div>
                    <div class="aui-product fans">
                        <a href="javascript:;" class="aui-flex b-line">
                            <div class="aui-product-img">
                                <img src="/upload/f7b178c5-dc83-4743-b120-90bfb24bbb9a.jpeg" alt="">
                            </div>
                            <div class="aui-flex-box">
                                <h2>百年康惠医疗保险</h2>
                                <p>200万保额，性价比超高的保障</p>
                                <span>
                                            <em>70岁也能保</em>
                                            <em>三高患者可投</em>
                                        </span>
                                <h3>230.00<em>元起</em></h3>
                            </div>
                            <div class="aui-arrow-text">安心保险</div>
                        </a>
                    </div>
                    <div class="divHeight"></div>
                </div>
            </div>
        </div>

    </section>
</section>

</body>
</html>